<template>
    <div class="Institutionalregistration">
        <div class="container">
            <!-- 头部信息 -->
            <header>
                <div class="filter-part">
                    <div class="filter-item">
                        <Select class="w-select" clearable v-model="filterObj.modeType" :key="filterObj" style='width:150px;'  placeholder="模块端">
                            <Option value="operate" style='text-align:center'>运营端</Option>
                            <Option value="doctorWeb" style='text-align:center'>医生pc端</Option>
                            <Option value="doctorApp" style='text-align:center'>医生app</Option>
                            <Option value="pharmacy" style='text-align:center'>药店端</Option>
                        </Select>
                    </div>
                    <div class="filter-item">
                        <DatePicker type="daterange" v-model="filterObj.time" placement="bottom-end" format="yyyy-MM-dd" placeholder="请选择登录日期" separator='至' style="width: 200px"></DatePicker>
                    </div>
                    <div class="filter-item">
                        <Input v-model="filterObj.userName" placeholder="操作人"/>
                    </div>
                    <div class="filter-btn-group">
                        <Button type="primary" icon="ios-search" @click="search(1)" class="btn"></Button>
                        <Button icon="icon-gengxin" @click="reset" class="btn">
                            <i class = "iconfont icon-gengxin" style="font-size:14px;margin-right:5px"></i>
                        </Button>
                    </div>
                </div>
            </header>
            <!-- 列表 -->
            <div class="list">
                <Table
                    border
                    :columns="column"
                    :data="list"
                    stripe
                    no-filtered-data-text="未查询到符合条件的记录"
                    @on-selection-change="selectChange"
                ></Table>
            </div>
            <!--分页器-->
            <div class="page">
                <Page :total="pagetotal" :current='filterObj.pageNo' :page-size="filterObj.pageSize"  show-total show-elevator @on-change="pageChange"/>
            </div>
        </div>
    </div>
</template>
<script>
import api from "@/api/commonApi";
import { DatePicker } from "view-design";
import Utils from "@/utils";
let nowDate = new Date();
let date = {
    year: nowDate.getFullYear(),
    month: nowDate.getMonth() + 1,
    date: nowDate.getDate()
}
const filterObj = {
    modeType: '',
    userName: '',
    time: [],
    pageSize: 10,
    pageNo: 1,
    conditional:0
};
export default {
    components: {
        DatePicker,
    },
    data() {
        return {
            pagetotal: null,
            filterObj: this.deepClone(filterObj),
            isBack: 1,
            list: [],
            column: [
                { type: "sum", title: "排序", width: 80, align: "center",
                    render: (h, params) => {
                    let sum = (this.filterObj.pageNo-1)*this.filterObj.pageSize + params.index +1;
                    return h("span", sum);
                    }
                },
                { key: "modeTypeName", title: "模块端", align: "center", width: 100,
                    render: (h, params) => {
                        let modeType = params.row.modeType;
                        let modeTypeName = ''
                        if(modeType=='operate') {
                            modeTypeName = '运营端'
                        } else if(modeType=='doctorWeb') {
                            modeTypeName = '医生pc端'
                        } else if(modeType=='doctorApp') {
                            modeTypeName = '医生app'
                        } else if(modeType=='pharmacy') {
                            modeTypeName = '药店端'
                        }
                        return modeTypeName ;
                    }
                },
                { key: "userName", title: "操作人", align: "center" },
                { key: "actionClass", title: "操作类", align: "center" },
                { key: "actionMethod", title: "操作方法", align: "center" },
                { key: "optBusiness", title: "业务类", align: "center", },
                { key: "optContent", title: "操作内容", align: "center" },
                { key: "optTime", title: "操作时间", align: "center" },                           
            ],
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "",
                title: "订单管理中心"
            },
            {
                path: "/index/comprehensive/loginLog/list",
                title: "登录日志"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.search(1);
    },
    methods: {
        reset() {
            this.filterObj = this.deepClone(filterObj);
            this.search(1);
        },
        pageChange(index) {
            this.filterObj.pageNo = index;
            this.search(index);
        },
        search(val) {
            const reqData = this.deepClone(this.filterObj);
            if(val) {
                this.filterObj.pageNo = val;
                reqData.pageNo = val;
            }
            let startTime = '';
            let endTime = '';
            if(this.filterObj.time[0]) {
                startTime = Utils.getNowDateBySpecialFormat(this.filterObj.time[0]).substring(0,10)
            }
            if(this.filterObj.time[1]) {
                endTime =  Utils.getNowDateBySpecialFormat(this.filterObj.time[1]).substring(0,10)
            }
            reqData.fromTime = startTime ? startTime : '';
            reqData.endTime = endTime ? endTime : ''
            this.$axios.post(api.findOperateLogList, reqData).then(res => {
                if (res.data.code === 1) {
                    let ret = res.data.object;
                    this.pagetotal = ret.total
                    this.list = ret.records
                } else {
                    this.list = []
                    this.$Message.info(res.data.message);
                }
            });
        },
        deepClone(obj) {
            return JSON.parse(JSON.stringify(obj));
        }
    },
    watch: {
        'filterObj.pageSize'(nv, ov) {
            this.filterObj.pageNo = 1;
            this.search(1);
        }
    },
};
</script>
<style lang="less" scoped>
  .Institutionalregistration {
    padding: 10px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    .container {
      width: 100%;
      margin: 0 auto;
      .filter-part {
        display: flex;
        flex-wrap: wrap;
        .filter-item {
          display: flex;
          margin: 10px 10px 10px 0;
          label {
            white-space: nowrap;
            line-height: 32px;
            padding-left: 5px;
            text-align: right;
          }
          .input {
            width: 220px;
          }
          .select {
            width: 70px;
          }
        }
        .filter-btn-group {
          // margin: 0px 10px 10px 0;
          flex: 0 0 auto;
          .btn {
            width: 58px;
            height: 32px;
          }
        }
      }
      header {
        width: 100%;
        .btn {
          margin-top: 10px;
        }
      }
      .list {
        width: 100%;
        margin: 10px 0;
      }
    }
    .page {
        width: 100%;
        margin: 10px auto;
        text-align: center;
    }
  }

  .detail{
    width: 100%;
    margin: auto;
    // padding-top: 10px;
    
    .detail-item{
      width: 98%;
        display: flex;
        flex-direction: column;
        margin: 10px auto;
        border: 1px solid #f0f0f0;
        box-shadow: 0 4px 3px #ebedf8;
        border-radius: 5px;
        margin-bottom: 20px;
      .detail-item-tle{
        font-size: 20px;
            padding-left: 15px;
            color: #333;
            height: 40px;
            line-height: 40px;
            background: #ebedf8;   
      }
      .detail-item-com{
        width: 96%;
        margin: auto;
        font-size: 13px;
        color: #676a6c;
        padding: 15px 0;
        line-height: 22px;
        padding-bottom: 20px;
        .img-bor{
          width: 100%;
          border: 1px solid #ddd;
          display: flex;
          flex-flow: row wrap;
          justify-content: flex-start;
        }
      }
    }
  }
  /deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
